<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title></title>
		<link rel="stylesheet" href="font/iconfont.css" />
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.header{
				background: black;
				width: 100%;
				top: -60px;
				transition: all 1s linear;
			}
			.nav{
				height: 92px;
				line-height: 92px;
				width: 65%;
				background:url(img/10003.png) no-repeat 0px center/174px;
				margin: 0 auto;
				text-align: right;
				
			}
			.nav a{
				margin: 0px 2.5%;
				font-size: 13px;
				color: #777;
				text-decoration: none;
			}
			.nav .active{
				color: #ff6000;
			}
			.footer{
				background: #242424;
				color: #c6c6c6;
				text-align: center;
				padding: 23px 0px;
				font-size: 12px;
			}
			.icon i {
				padding: 16px;
				font-size: 0;
				margin: 0px 5px;
				background: url(img/10007.png) -64px -160px;
			}
			.icon i:nth-child(2){
				background: url(img/10007.png) -0px -160px;
			}
			.icon i:nth-child(3){
				background: url(img/10007.png) -640px -160px;
			}
			.icon i:nth-child(4){
				background: url(img/10007.png) -672px -160px;
			}
			.icon i:nth-child(5){
				background: url(img/10007.png) -128px -160px;
			}
			.footer p {
				margin-top: 20px;
			}
			.iphone_nav{
				display: none;
			}
			.iphone_nav_logo{
				height: 70px;
				background: black;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.iphone_nav_logo img{
				width: 180px;
			}
			.iphone_nav_sel{
				
				background: rgb(255,47,32);
				color: white;
				padding: 0px 10px 0px 20px;
				font-size: 14px;
				position: relative;
			}
			.iphone_nav_sel_hd{
				height: 40px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.menu{
				position: absolute;
				background: white;
				top: 40px;
				left: 0px;
				width: 100%;
				display: none;
			}
			.menu a{
				display: block;
				color: #333;
				text-decoration: none;
				line-height: 30px;
				text-indent: 20px;
			}
			.menu a:hover{
				background: rgb(255,47,32);
				color: white;
			}
			#Top{
				position: fixed;
				right: 20px;
				bottom: 30px;
				font-size: 30px;
				color: aqua;
				display: none;
				cursor: pointer;
			}
			@media screen and (max-width: 640px) {
				.nav{
					display: none;
				}
				.iphone_nav{
					display: block;
				}
				.footer{
					margin-top: 20px;
				}
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<a class="active" href="主页.html" target="myiframe">主页</a>
				<a  href="关于我们.html" target="myiframe">关于我们</a>
				<a  href="产品中心.html" target="myiframe">产品中心</a>
				<a href="服务项目.html" target="myiframe">服务项目</a>
				<a href="新闻资讯.html" target="myiframe">新闻资讯</a>
				<a  href="在线预约.html" target="myiframe">在线预约</a>
			</div>
			<div class="iphone_nav">
				<div class="iphone_nav_logo">
					<img src="img/10003.png" />
				</div>
				<div class="iphone_nav_sel">
					<div class="iphone_nav_sel_hd">
						<span class="home">首页</span>
						<span>v</span>
					</div>
					<div class="menu">
						<a class="active" href="主页.html" target="myiframe">主页</a>
						<a  href="关于我们.html" target="myiframe">关于我们</a>
						<a  href="产品中心.html" target="myiframe">产品中心</a>
						<a href="服务项目.html" target="myiframe">服务项目</a>
						<a href="新闻资讯.html" target="myiframe">新闻资讯</a>
						<a  href="在线预约.html" target="myiframe">在线预约</a>
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<iframe class="myiframe" onload="this.height=myiframe.document.body.scrollHeight" style="width: 100%;border: none;display: block;" scrolling="no" name="myiframe"  src="主页.html"></iframe>
		</div>
		<div class="footer">
			<div class="icon">
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
			<p>版权所有 2019-2020  汽车美容工作室  技术支持：</p>
		</div>
		<span id="Top" class="icon iconfont icon-fanhuidingbu-copy"></span>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var nav = document.querySelector(".nav");
			var oa = nav.querySelectorAll("a");
			//getElementsByClassName 写类名，返回数组
			var header = document.getElementsByClassName("header")[0];
			var nav = document.getElementsByClassName("nav")[0];
			var Top = document.getElementById("Top");
			var menu = document.getElementsByClassName("menu")[0];
			var aa = menu.getElementsByTagName("a");
			var home = document.getElementsByClassName("home")[0];
			var iphone_nav_sel_hd = document.getElementsByClassName("iphone_nav_sel_hd")[0];
//			var list = document.getElementsByClassName("list")[0];
			var myiframe = document.getElementsByClassName("myiframe")[0];
			var list =myiframe.contentWindow.document.getElementsByClassName("list")[0];
			var li = list.getElementsByTagName("li");
			//点击导航栏a标签修改样式
			for(var i=0;i<oa.length;i++){
				oa[i].onclick = function(){
					for(var j=0;j<oa.length;j++){
						oa[j].className="";
					}
					this.className="active";
				}
			}	
			var t = 0;
			var timer ;
			window.onscroll = function(){
				t = document.documentElement.scrollTop||document.body.scrollTop;
				console.log(t);
				//控制返回顶部隐藏显示
				if(t>=300){
					Top.style.display = "block";
				}else{
					Top.style.display = "none";
				}
				//列表内容从下向上移动
				if(t>=150){
					var list =myiframe.contentWindow.document.getElementsByClassName("list")[0];
					var li = list.getElementsByTagName("li");
					console.log(li);
					for(var j=0;j<li.length;j++){
						li[j].style.top = 0+"px";
					}
				}
				//顶部悬浮
				if(document.body.offsetWidth>=640){
					if(t>=200){
						header.style.transition="all 0.5s linear";
						header.style.position="fixed";
						header.style.top = 0+"px";
						nav.style.height = "60px";
						nav.style.lineHeight="60px";
						nav.style.background="url(img/10003.png) no-repeat 0px center/124px";
					}else{
						header.style.transition="none";
						header.style.position="static";
						header.style.top = -60+"px";
						nav.style.height = "92px";
						nav.style.lineHeight="92px";
						nav.style.background="url(img/10003.png) no-repeat 0px center/174px";
					}
				}	
			}
			//点击返回顶部
			Top.onclick = function(){
				clearInterval(timer);
				timer = setInterval(function(){
					t-=100;
					if(t<=0){
						t=0;
						clearInterval(timer);
					}
					document.documentElement.scrollTop=document.body.scrollTop=t;
				},20)
			}
			//二级菜单展开收起
			var show = 0;
			iphone_nav_sel_hd.onclick = function(){
				if(show==0){
					show=1;
					menu.style.display = "block";
					home.innerHTML="关闭";
				}else{
					show=0;
					menu.style.display = "none";
					home.innerHTML="首页";
				}
			}
			//修改二级菜单标题
			for(var j=0;j<aa.length;j++){
				aa[j].onclick = function(){
					home.innerHTML = this.innerHTML;
					menu.style.display="none";
					show = 0;
				}
			}
		}
	</script>
</html>
